<template>
  <div class="about">
    <header>
      <span @click="$router.back()">返回</span>
      <section>购物车清单</section>
      <span @click="isEit=!isEit">{{isEit?'编辑':'完成'}}</span>
    </header>
    <ul>
      <li v-for="(item, index) in cartList" :key="index">
        <input type="checkbox" v-model="item.ischeck" @change="oneCheck"/>
        <img src="../assets/jingtian.jpeg" alt="" />
        <section>
          <h4>{{ item.name }}</h4>
          <p>￥{{ item.price }}</p>
        </section>
        <div>
          <p @click="numAdd(item)">+</p>
          <p>{{ item.num }}</p>
          <p @click="item.num == 1 ? 1 : item.num--">-</p>
        </div>
      </li>
    </ul>
    <div class="foot">
      <label for=""><input type="checkbox" v-model="allCheck" @change="checkAll"/>全选</label>
      <span>合计：￥{{allPrice}}</span>
      <span class="right" @click="del">{{isEit?'去结算':'删除选中'}}（{{allNum}}）</span>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, toRefs, computed } from "vue";
export default {
  setup(props) {
    const store = useStore();
    const data = reactive({
      cartList: computed(() => store.state.cartList),
      allCheck: false, // 全选的状态
      isEit: true, // 是否是编辑
      allPrice: computed(() => { // 总价
        let price = 0;
        data.cartList.forEach(item => {
          if (item.ischeck){
            price+=item.num*item.price
          }
        })
        return price;
      }),
      allNum: computed(() => { // 总数
        let num = 0;
        data.cartList.forEach(item => {
          if (item.ischeck){
            num+=item.num
          }
        })
        return num;
      })
    });
    
    const checkAll = () => { // 全选的状态
      // console.log(data.allCheck);
      data.cartList.forEach(item => {
        item.ischeck = data.allCheck
      })
    }
    const oneCheck = () => { // 反选的事件
       data.allCheck = data.cartList.every(item => item.ischeck);
    }

    const del = () => { // 删除的函数
      if (data.isEit) return;
      store.commit('storeDel');
    }
    const numAdd = (val) => {
        val.num++;
        store.commit('kong');
    }
    // const fil = () => {
    //     store.commit('kong');
    // }
    return {
      ...toRefs(data),
      checkAll,
      oneCheck,
      del,
      numAdd
    };
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
  background: #e9e9e9;
  header {
    height: 50px;
    display: flex;
    background: #fff;
    align-items: center;
    section {
      flex: 1;
      text-align: center;
    }
    span {
      width: 60px;
      text-align: center;
    }
  }
}
ul{
  height: calc(100% - 100px);
  overflow: auto;
}
li {
  display: flex;
  background: #fff;
  margin-top: 10px;
  padding: 0 10px;
  align-items: center;
  img {
    width: 60px;
    margin: 0 10px;
  }
  section {
    flex: 1;
    p {
      color: #8d3ec5;
    }
  }
}
.foot {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: #fff;
  span{
    margin-left: 20px;
  }
  .right{
    margin-left: auto;
    line-height: 50px;
    background: #8d3ec5;
    color: #fff;
    padding: 0 5px;
  }
}
</style>